<template>
  <div>
    <nav-bar title="质量报告"></nav-bar>
    <div class="realTimeStatistical maxinBox">
      <div class="backgroundfff" style="padding: 10px;">
        <div class="title">
          <div>实时检查</div>
        </div>
        <van-row class="todayShow center" v-if="massStatistical">
          <van-col :span="24">
            <div>
              <label class="fontSize16">{{massStatistical.totalPassRate.toFixed(2)}}%</label>
              <div class="color999 fontSize14">总合格率</div>
            </div>
          </van-col>
        </van-row>
        <!-- <my-echarts id="myChat2" :options="chatData2"></my-echarts> -->
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              测量类型分布
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat" :options="chatData"></my-echarts>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              近一周合格率趋势
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat1" :options="chatData1"></my-echarts>
      </div>
    </div>
  </div>
</template>

<script>
  import massManageAPI from '../../../../api/workAPI/massManageAPI.js'
  import MyEcharts from '../../../../components/MyChart.vue'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        realTimeType: [],
        realTimeTypeData: [],
        massDate: [],
        massTypeList: [],
        massTypeDataList: [],
        massDateData: [],
        massStatistical: null,
        chatData1: null,
        chatData: null,
        chatData2: null,
      }
    },
    methods:{
      more() {
        this.$router.push({
          path:'/TypeStatistical'
        })
      },
      getMassData() {
        let projectId = localStorage.getItem('projectId')
        massManageAPI.MassStatistical(projectId).then(res => {
          this.massStatistical = res
          this.realTimeTypeData = res.passRateList.map(item => {
            return {
              name: item.categoryName,
              value: item.count
            }
          })
          this.massDate = res.passRateList.map(item => {
            return item.date
          })
          this.massDateData = res.passRateList.map(item => {
            return item.rate
          })
          this.massTypeList = res.categoryList.map(item => {
            return item.categoryName
          })
          this.massTypeDataList = res.categoryList.map(item => {
            return {
              name: item.categoryName,
              value: item.count
            }
          })
          this.chatData2 = {
            backgroundColor: '#050038',
            title: {
                text: '',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 25,
                    color: 'rgb(97, 142, 205)'
                }
            },
            series: [{
                    type: 'liquidFill',
                    radius: '45%',
                    center: ['50%', '50%'],
                    data: [0.5, 0.5, 0.5], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: 'rgb(255,0,255,0.1)'
                    },
                    label: {
                        normal: {
                            formatter: (0.6 * 100).toFixed(2) + '%',
                            textStyle: {
                                fontSize: 50
                            }
                        }
                    },
                    outline: {
                        show: false,
                    }
                },
                {
                    "type": "pie",
                    "center": ["50%", "50%"],
                    "radius": ["50%", "52%"],
                    "hoverAnimation": false,
                    "data": [{
                            "name": "",
                            "value": 500,
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: '#5886f0'
                            },
                            emphasis: {
                                labelLine: {
                                    show: false
                                },
                                itemStyle: {
                                    color: '#5886f0'
                                },
                            }
                        },
                        { //画中间的图标
                            "name": "",
                            "value": 4,
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: '#ffffff',
                                "normal": {
                                    "color": "#5886f0",
                                    "borderColor": "#5886f0",
                                    "borderWidth": 20,
                                    // borderRadius: '100%'
                                },
                            },
                            label: {

                                borderRadius: '100%'
                            },
                            emphasis: {
                                labelLine: {
                                    show: false
                                },
                                itemStyle: {
                                    color: '#5886f0'
                                },
                            }

                        },
                        { // 解决圆点过大后续部分显示明显的问题
                            "name": "",
                            "value": 4,
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: '#5886f0'
                            },
                            emphasis: {
                                labelLine: {
                                    show: false
                                },
                                itemStyle: {
                                    color: '#5886f0'
                                },
                            }
                        },
                        { //画剩余的刻度圆环
                            "name": "",
                            "value": 88,
                            itemStyle: {
                                color: '#050038'
                            },
                            "label": {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            emphasis: {
                                labelLine: {
                                    show: false
                                },
                                itemStyle: {
                                    color: 'rgba(255,255,255,0)'
                                },
                            }
                        }
                    ]
                }

            ]
        }
          this.chatData1 = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.massDate
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '合格率',
                    type: 'line',
                    stack: '总量',
                    data: this.massDateData,
                    itemStyle : {
                      normal : {
                        color:'#1577FF', //改变折线点的颜色
                        lineStyle:{
                          color:'#1577FF' //改变折线颜色
                        }
                      }
                    },
                }
            ]
          }
          this.chatData =  {
              title: {
                text: '',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 20
                }
              },
              legend: {
                  left: 'center',
                  data: this.massTypeList
              },
              tooltip: {
                trigger: 'item'
              },
              series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['24%', '35%'],
                clockwise: true,
                avoidLabelOverlap: true,
                hoverOffset: 15,
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{c}个',
                    rich: {
                        hr: {
                            backgroundColor: 't',
                            borderRadius: 3,
                            width: 3,
                            height: 3,
                            padding: [3, 3, 0, -12]
                        },
                        a: {
                            padding: [-30, 15, -20, 15]
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 20,
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: this.massTypeDataList,
              }]
          }
        })
      }
    },
    mounted() {
      this.getMassData()
    }
  }
</script>

<style scoped lang="scss">
  .title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
